<template>
  <div class="login">
    <div class="logo">
      <van-image
          round
          width="1rem"
          height="1rem"
          src="/imgs/logo.png"
      />
    </div>
    <van-form @submit="onSubmit">
      <van-field
          v-model="username"
          name="username"
          label="用户名"
          autocomplete="off"
          placeholder="请输入用户名或邮箱"
          :rules="[{ required: true, message: '请输入用户名' }]"
      />
      <van-field
          v-model="password"
          name="password"
          label="密码"
          autocomplete="new-password"
          type="password"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' }]"
      />
      <div class="subBtns">
        <van-button round block type="danger" native-type="submit">登录</van-button>
        <van-button @click="goRegister" class="no-border" round block type="primary" plain>注册</van-button>
      </div>
    </van-form>
  </div>

</template>

<script setup lang="ts">
import {ref} from 'vue'
import {login} from '../api/user'
import {useRouter} from "vue-router";
const username = ref('')
const password = ref('')
const router = useRouter()
const onSubmit = async (values) =>{
  console.log('submit',values)
  let response = await login(values)
  console.log(response,"登录")
  localStorage.setItem('hsjyToken',response.data.token)
  localStorage.setItem('id',JSON.stringify(response.data.userInfo._id))
  localStorage.setItem('username',JSON.stringify(response.data.userInfo.name))
  localStorage.setItem('hsjyUserInfo',JSON.stringify(response.data.userInfo))
  router.push('/my')
}
const goRegister = ()=>{
  router.push('/register')
}
</script>

<style scoped lang="less">
.login {
  height: 100vh;
  background-color: #fff;
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3rem;
  }
  .subBtns {
    margin: 0.32rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .no-border {
      border: none;
      color: #999;
    }
    .van-button {
      width: 5rem;
      margin-bottom: 0.1rem;
    }
  }
}
</style>
